<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/three.js"></script>
</head>
<body>
  <!-- Div which will hold the Output -->
<div id="WebGL-output">
  </div>
  
  <!-- Javascript code that runs our Three.js examples -->
  <script type="text/javascript">
  
      // once everything is loaded, we run our Three.js stuff.
      function init() {
  
          // create a scene, that will hold all our elements such as objects, cameras and lights.
          var scene = new THREE.Scene();
  
          // create a camera, which defines where we're looking at.
          var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  
          // create a render and set the size
          var renderer = new THREE.WebGLRenderer();
  
          renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.shadowMapEnabled = true;
  
          // create the ground plane
          var planeGeometry = new THREE.PlaneGeometry(60, 20);
          var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
          var plane = new THREE.Mesh(planeGeometry, planeMaterial);
          plane.receiveShadow = true;
  
          // rotate and position the plane
          plane.rotation.x = -0.5 * Math.PI;
          plane.position.x = 15;
          plane.position.y = 0;
          plane.position.z = 0;
  
          // add the plane to the scene
          scene.add(plane);
  
          // create a cube
          var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
          var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
          var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
          cube.castShadow = true;
  
          // position the cube
          cube.position.x = -4;
          cube.position.y = 3;
          cube.position.z = 0;
  
          // add the cube to the scene
          scene.add(cube);
  
          var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
          var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
          var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  
          // position the sphere
          sphere.position.x = 20;
          sphere.position.y = 4;
          sphere.position.z = 2;
          sphere.castShadow = true;
  
          // add the sphere to the scene
          scene.add(sphere);
  
          // position and point the camera to the center of the scene
          camera.position.x = -30;
          camera.position.y = 40;
          camera.position.z = 30;
          camera.lookAt(scene.position);
  
          // add spotlight for the shadows
          var spotLight = new THREE.SpotLight(0xffffff);
          spotLight.position.set(-40, 60, -10);
          spotLight.castShadow = true;
          scene.add(spotLight);
  
          // add the output of the renderer to the html element
          document.getElementById("WebGL-output").appendChild(renderer.domElement);
  
          // call the render function
          renderer.render(scene, camera);
      }
      window.onload = init;
</script>
</body>
</html>